<template>
  <div class="content">
    <el-row :gutter="20">
      <el-col :span="8" class="left">
        <LeftTop />
        <LeftCenter />
        <LeftFooter />
      </el-col>
      <el-col :span="8" class="center">
        <CenterTop />
        <CCenter class="c_center" />
      </el-col>
      <el-col :span="8" class="right">
        <RightTop />
        <RightCenter />
        <RightFooter />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 左侧页面
import LeftTop from "./left/LeftTop.vue";
import LeftCenter from "./left/LeftCenter";
import LeftFooter from "./left/LeftFooter.vue";
// 中间页面
import CenterTop from "./center/C_Top.vue";
import CCenter from "./center/C_Center.vue";
// 右侧页面
import RightTop from "./right/components/R_Top.vue";
import RightCenter from "./right/components/R_Center.vue";
import RightFooter from "./right/components/R_Footer.vue";
</script>

<style scoped lang="scss">
.content {
  .el-row {
    height: 100%;
    width: 100%;
  }
  .left,
  .right {
    height: 100%;
    div {
      height: 33%;
    }
  }
  .center {
    height: 100%;
  }
}
</style>
